<template>
  <div class="count">
    <h2>当前求和为{{ sum }},放大10倍{{ bigSum }}</h2>
    <h3>欢迎来到{{ name }}，它在{{ address }}</h3>
    <!-- 强制转为数字 -->
    <select v-model.number="n">  
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script lang="ts" setup name="Count">
// 引入useCountStore
import { useCountStore } from '@/store/count';
import { storeToRefs } from 'pinia';
import { ref, toRefs } from 'vue';

// 数据
// 使用useCountStore，得到一个专门保存Count相关的Store
const countStore = useCountStore()
const {sum,name,address,bigSum,upperName} = storeToRefs(countStore)   //storeToRefs只关注数据，不会对方法进行ref包裹

let n = ref(1)  
// 方法
function add(){
  // 修改数据的第三种方法：action
  countStore.increment(n.value)
}
function minus(){
  countStore.sum -= n.value
}


</script>

<style>
.count{
  background-color: skyblue;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  width: 500px;
}
select,button{
  margin: 0 5px;
  height: 30px;
  width: 50px;
}
</style>